.gi-config-panel {
  height: 100%;
  overflow: auto;
  background: var(--background-color-transparent);
  border-radius: 8px;
  .datav-gui .datav-gui-select .rc-select-selection {
    border-radius: 2px !important;
  }
  .datav-gui .datav-gui-fill {
    border-radius: 2px !important;
  }

  .ant-formily-array-collapse-item {
    border: none;
    background-color: var(--background-color);
  }
}

.gi-config-panel::-webkit-scrollbar {
  display: none;
}

// :root body{
//   /* -------- 颜色 ----------- */
//  /* 主题色 */
//   --datav-gui-primary-color: #2483ff;
//   /* 错误色 */
//   --datav-gui-error-color: #FF4F43;
//   /* 悬停色 */
//   --datav-gui-hover-color: #26A5FF;
//   /* 点击色 */
//   --datav-gui-active-color: #2693FF;
//   /* 禁用色 */
//   --datav-gui-disabled-color: #424447;

//   /* 背景色-上层 */
//   --datav-gui-background-color-front: RGB(242, 242, 242);
//   /* 背景色-上层-更浅： */
//   --datav-gui-background-color-front-lighter: RGB(250, 250, 250);
//   /* 背景色-下层 */
//   --datav-gui-background-color-back: RGB(250, 250, 250);
//   /* 背景色-下层-更深 */
//   --datav-gui-background-color-back-darker: hsl(0, 0%, 0%);
//   /* 背景色-悬停 */
//   --datav-gui-background-hover-color: #eee;
//   /* 控件背景色 */
//   --datav-gui-component-background-color: RGBA(242, 242, 242, 1.00);
//   /* 控件深背景色 */
//   --datav-gui-component-background-color-darker: RGBA(242, 242, 242, 1);
//   /* 控件悬停背景色 */
//   --datav-gui-component-background-hover-color: RGBA(242, 242, 242, 0.8);
//   /* 控件点击背景色 */
//   --datav-gui-component-background-active-color: RGBA(242, 242, 242, 0.8);
//   /* 控件禁用背景色 */
//   --datav-gui-component-background-disabled-color: RGBA(242, 242, 242, 0.50);

//   --datav-input-bg: RGBA(242, 242, 242, 1);

//   /* 文字色 */
//   --datav-gui-font-color-base: #A1AEB3;
//   --datav-gui-font-color-1: #000;
//   --datav-gui-font-color-2: #222;
//   --datav-gui-font-color-3: #737C80;
//   /* 文字描述色 */
//   --datav-gui-font-color-description: #5C6366;
//   /* 文字禁用色 */
//   --datav-gui-font-color-disabled: #424447;

//   /* 边框色 */
//   --datav-gui-border-color: #DDD;
//   --datav-common-outline: 1px solid #AAA;
//   /* 控件边框色 */
//   --datav-gui-component-border-color: #DDD;

//   --datav-gui-slider-handle-bg: #AAA;

//   /* 遮盖色 */
//   --datav-gui-cover-color: rgba(0, 0, 0, 0.25);

//   /* 滑动条高亮色 */
//   --datav-gui-component-slider-track-color: linear-gradient(to right, #74f0ff, #2681ff);

//   /* 禁用透明度 */
//   --datav-gui-disabled-opacity: 0.5;

//   /* 弹出框阴影 */
//   --datav-gui-popover-shadow: 0 0 4px #000;

//   /* -------- 文字 ----------- */
//   --datav-gui-font-size-base: 12px;
//   --datav-gui-icon-size-md: 14px;

//   /* -------- 边框 ----------- */
//   /* 默认边框 */
//   --datav-gui-component-border: 1px solid var(--datav-gui-component-border-color);

//   /* -------- 动画 ----------- */
//   --datav-gui-transition-time: 0.3s;
//   --datav-gui-transition-easing: ease-in-out;
// }

.gi-tab {
  position: absolute;
  top: 40px;
  width: 340px;
  visibility: hidden;
  &.true {
    visibility: visible;
  }
  &.false {
    visibility: hidden;
  }
}
.datav-gui {
  background: #f7f8fa;
  box-shadow: none;
}
.datav-collapse {
  margin: 8px;
  padding: 4px;
  background: var(--background-color);
  border-radius: 8px;
  // border: 1px solid #ddd;
  box-shadow: -1px -1px 4px 0 rgba(223, 223, 223, 0.5), -2px 2px 4px 0 rgba(244, 244, 244, 0.5),
    2px 3px 8px 2px rgba(151, 151, 151, 0.05);
}
.datav-collapse-panel-header {
  background: var(--background-color);
}
.datav-gui .datav-gui-collapse .datav-collapse-panel-header::before {
  display: none;
}

.datav-gui-collection-title.ellipsis {
  color: #000;
  font-size: 14px;
  font-family: PingFangSC-Medium;
}

.gi-site-collapse {
  .ant-collapse-content > .ant-collapse-content-box {
    padding: 8px;
  }
  .ant-collapse-item {
    margin: 0px 8px !important;
    border-radius: 4px !important;
    // box-shadow: -1px -1px 4px 0 rgba(223, 223, 223, 0.5), -2px 2px 4px 0 rgba(244, 244, 244, 0.5),
    //   2px 3px 8px 2px rgba(151, 151, 151, 0.05) !important;
    box-shadow: var(--box-shadow-pannel) !important;
    background: var(--background-color);
    .ant-formily-item {
      margin: 4px;
      font-size: 14px;
    }
  }
}
.gi-site-collapse-item {
  .ant-collapse-item {
    margin: 4px 0px !important;
    border-radius: 4px !important;
    // box-shadow: -1px -1px 4px 0 rgba(223, 223, 223, 0.5), -2px 2px 4px 0 rgba(244, 244, 244, 0.5),
    //   2px 3px 8px 2px rgba(151, 151, 151, 0.05) !important;
    box-shadow: var(--box-shadow-pannel) !important;
    background: var(--background-color);
  }
}
.ant-formily-item-label-align-right > .ant-formily-item-label {
  color: var(--text-color);
  justify-content: center;
  width: 74px;
  font-size: 13px;
}
.ant-formily-item-feedback-layout-loose {
  margin-bottom: 8px;
}
